<template>
  <div class="project-management">
    <div class="project-management__header">
      <el-row :gutter="0" class="menu">
        <el-col :span="10">
          <div class="h5 menu__title">Project List({{ dataCount }})</div>
        </el-col>
        <el-col :span="3">
          <el-dropdown trigger="click" class="menu__dropdowm">
            <span class="el-dropdown-link menu__dropdowm__font">
              All
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
        <el-col :span="8">
          <el-input class="menu__input" placeholder="Search" v-model="search">
            <template #suffix>
              <el-icon color="#fff" size="50" @click="handleSearchBtn">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" class="menu__btn" @click="handleAddBtn"
            >add</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="project-management__table">
      <div class="table">
        <el-table
          :data="dataList"
          style="width: 100%"
          :header-cell-style="{ background: '#1c1c24', color: '@fff' }"
          :cell-style="{ background: '#1c1c24', height: '61px' }"
        >
          <el-table-column width="150" label="Name" prop="name" fixed="left" />
          <el-table-column
            width="166"
            align="center"
            label="Industry"
            prop="industry"
          />
          <!-- width="123" -->
          <el-table-column align="center" label="Stage" prop="stage" />
          <!-- width="124" -->
          <el-table-column align="center" label="Location" prop="location" />
          <!-- width="169" -->
          <el-table-column align="center" label="Method">
            <template #default="scope">
              <div>{{ scope.row.fmethod }}</div>
              <div class="table__inverse2">
                (${{ scope.row.financeAmount }} Million)
              </div>
            </template>
          </el-table-column>

          <el-table-column width="188" align="center">
            <template #header>
              <div>Operation</div>
            </template>
            <template #default="scope">
              <el-button
                size="small"
                class="table__edit-btn"
                @click="handleEditBtn(scope.row)"
              >
                Edit
              </el-button>

              <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                icon-color="#626AEF"
                :icon="InfoFilled"
                title="Are you sure to delete this?"
                @confirm="handleConfirmBtn(scope.row)"
                effect="dark"
              >
                <template #reference>
                  <el-button size="small" plain class="table__del-btn">
                    Delete
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="select">
        <el-checkbox label="Select All" size="large" />
      </div>
      <div class="page">
        <el-pagination
          layout="prev, pager, next"
          :total="dataCount"
          v-model:current-page="page.currentPage"
          :page-size="page.pageSize"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import router from '@/router'
import { useStore } from '@/store'

import { Plus, Search, InfoFilled } from '@element-plus/icons-vue'
import { computed } from '@vue/reactivity'

const search = ref('')
const store = useStore()

const handleSearchBtn = () => {
  store.dispatch('user/getProjectListAction', {
    queryInfo: {
      offset: page.value.currentPage,
      size: page.value.pageSize,
      name: search.value,
    },
  })
}

const handleAddBtn = () => {
  router.push('/user/project-edit')
}

const handleEditBtn = (item: any) => {
  router.push({ name: 'edit', params: item })
}

// 删除点击确认按钮
const handleConfirmBtn = (item: any) => {
  handleDeleteBtn(item)
}
const handleDeleteBtn = (item: any) => {
  store.dispatch('user/deleteProjectAction', {
    id: item.id,
  })
}

const page = ref({ currentPage: 1, pageSize: 10 })
watch(
  () => page,
  () => {
    getProjectList()
  },
  {
    deep: true,
  }
)

// 获取当前项目列表
const getProjectList = (queryInfo: any = {}) => {
  store.dispatch('user/getProjectListAction', {
    queryInfo: {
      offset: page.value.currentPage, //currentPage * pageSize
      size: page.value.pageSize,
      ...queryInfo,
    },
  })
}
getProjectList()

// 从 vuex 中获取数据
const dataList = computed(() => store.state.user.projectList)

const dataCount = computed(() => store.state.user.projectCount)
</script>

<style>
.el-popover.el-popper {
  background-color: #303133;
  border-color: #1c1c24;
}
</style>
<style lang="less" scoped>
.project-management {
  background: #1c1c24;
  opacity: 1;
  border-radius: 20px;
  &__header {
    padding: 25px 23px 33px 31px;
  }
  &__table {
    border-radius: 0 0 20px 20px;
    padding: 0 24px 35px 30px;
    background-color: #1c1c24;
    .table {
      margin-bottom: 21px;
      &__inverse2 {
        color: #ff3737;
        font-size: 12px;
      }
      &__edit-btn {
        border-radius: 8px;
        background-color: #3772ff !important;
        color: #fff;
        border: none;
        width: 63px;
      }
      &__del-btn {
        background-color: #1c1c24;
        color: #3772ff;
        border: 1px solid #3772ff;
        border-radius: 8px;
        // width: px;
      }
    }
    .select {
      height: 29px;
      margin-bottom: 39px;
    }
    .page {
      &__pagination {
        font-family: Segoe UI;
        font-size: 16px;
        font-weight: 400;
        line-height: 0px;
        color: #ffffff;
      }
    }
  }
}
.menu {
  &__title {
    line-height: 48px;
    margin-bottom: 0;
    color: #fff;
    font-weight: 500;
    opacity: 1;
  }
  &__dropdowm {
    width: 85%;
    height: 48px;
    border: 2px solid rgba(112, 112, 112, 0.2);
    // opacity: 0.2;
    background-color: transparent;
    border-radius: 5px;
    justify-content: center;
    align-items: center;

    &__font {
      font-size: 20px;
      font-family: SF Pro Display;
      font-weight: 400;
      line-height: 0px;
      color: #3772ff;
    }
  }
  &__input {
    height: 48px;
    width: 84%;
    opacity: 0.2;
    border-radius: 5px;
    :deep(.el-input__inner) {
      color: #fff;
    }
    :deep(.el-input__suffix) {
      align-items: center;
      cursor: pointer;
    }
  }
  &__btn {
    // width: 120px;
    width: 93%;
    height: 48px;
    background: #3772ff;
    border-radius: 5px;
  }
}
@media screen and (max-width: 768px) {
  .menu {
    display: flex;
    align-items: center;
    &__title {
      font-size: 14px;
    }
    &__dropdowm {
      flex-grow: 2;
      height: 28px;
      text-align: center;
      // width: 40px;
      &__font {
        .el-icon--right {
          display: none;
        }
        font-size: 12px;
      }
    }
    &__input {
      height: 28px;
      :deep(.el-input__inner) {
        height: 28px;
      }
    }
    &__btn {
      height: 28px;
    }
  }
}

:deep(.el-checkbox__inner) {
  border: 1px solid #6d7382;
  background-color: transparent;
}
:deep(.el-input__inner) {
  height: 48px;
  background: #1c1c24;
}
:deep(.el-table__body-wrapper) {
  background-color: #1c1c24;
}
:deep(.el-checkbox.el-checkbox--large) {
  height: 29px;
}
:deep(.table > :not(caption) > * > *) {
  padding: 0;
}
:deep(.el-table__header th) {
  font-family: SF Pro Display;
  font-weight: 400;
  line-height: 40px;
  font-size: 18px;
  border-top: 2px solid rgba(84, 84, 84, 0.2);
}
:deep(.el-pagination) {
  --el-pagination-bg-color: #1c1c24;
}
:deep(.el-pagination button:disabled) {
  background-color: #1c1c24;
}
:deep(.el-table__cell) {
  border-bottom: 2px solid rgba(84, 84, 84, 0.2) !important;
}
:deep(.el-table) {
  --el-table-row-hover-bg-color: rgb(35, 32, 32);
}
:deep(.el-pagination) {
  justify-content: center;
}
:deep(.el-table__inner-wrapper::before) {
  background-color: transparent;
}

:deep(.el-table .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 分页

:deep(.el-pagination) {
  justify-content: center;
  margin-bottom: 89px;
}
:deep(.el-pagination button) {
  color: #86888b;
  background-color: transparent;
}
:deep(.el-pager li) {
  background-color: transparent;
  color: #86888b;
}
:deep(.el-pager li.is-active) {
  background-color: #3772ff;
  color: #fff;
}
</style>
